HTML Full Course [Day 7] [Hindi] π» | Images and Figure Tag π | Mohit Decodes
HTML Tutorial β Part 7: Images & <figure>
Tag
Welcome to Day 7 of the HTML Full Course [Hindi] by Mohit Decodes! In this tutorial, we will learn how to display images in HTML and use the <figure>
and <figcaption>
tags to make them semantically meaningful and accessible.
π Adding Images in HTML
To display an image, use the <img>
tag. It's a self-closing tag and requires at least two attributes:
src
: the source path of the imagealt
: alternative text for accessibility and SEO
β Example:
html
CopyEdit
<img src="images/html-logo.png" alt="HTML Logo" width="200" height="200">
β οΈ Important Notes:
- Use relative paths for local images.
- Use absolute URLs for images from other websites.
- Always include
alt
text for screen readers and SEO. - You can use
width
andheight
to resize images.
π§© The <figure>
and <figcaption>
Tags
The <figure>
tag is used to wrap self-contained visual content like an image, diagram, or chart. The <figcaption>
tag is used to provide a caption or description for the image.
β Example:
html
CopyEdit
<figure>
<img src="images/mohit-photo.jpg" alt="Mohit Kumar teaching HTML">
<figcaption>Mohit Decodes teaching HTML β Day 7</figcaption>
</figure>
π― Benefits of Using <figure>
:
- Improves semantic structure
- Pairs content with meaningful captions
- Enhances accessibility
π Bonus Attributes for <img>
:
loading="lazy"
β Defers loading until the image is neededtitle="Tooltip"
β Shows extra info when hoveringstyle="border-radius: 10px;"
β Custom CSS for image styling